<template>
	<div id="ArticleWrite">
		 <toast 
			:showToast = "showToast"
			:message = "showmessage"
			:delay = "delay"
			ref="toast"
		 ></toast>
		<input placeholder="标题" class="title" v-model="title"></input>
		<textarea placeholder="简介" class="description" v-model="description"></textarea>
		<mavon-editor
			 class="md"
			:value="articleDetail"
			:subfield = "prop.subfield"
			:defaultOpen = "prop.defaultOpen"
			:toolbarsFlag = "prop.toolbarsFlag"
			:editable="prop.editable"
			:scrollStyle="prop.scrollStyle"
			:navigation="prop.navigation"
			@save = "save"
		 ></mavon-editor>
		 <div>
			 <button @click="saveblog()" class="saveblog">发布</button>
		 </div>
	</div>
</template>

<script>
	import toast from './tools/Toast.vue'
	import config from '../../config.js'
	export default {
	  name: 'ArticleWrite',
	  mounted () {
		  // console.log(this.$route.query.id)
	  },
	  components: {
		  toast
	  },
	  data(){
		  return{
			blogs:[],
			articleDetail:"",
			myhtml:"",
			mymd:"",
			localhost:config.localhost,
			port:config.port,
			showToast:false,
			showmessage:"11111",
			delay:3000,
			title:"",
			description:""
		  }
	  },  
	  computed: {
	    prop () {
		  console.log(this.$route.query.id);
		  if(this.$route.query.id){
			  let i = this.$route.query.id;
			  this.articleDetail = this.blogs[i].content;
		  }
	      let data = {
	        subfield: true,// 单双栏模式
	        defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域 
	        editable: true,
	        toolbarsFlag: true,
	        scrollStyle: true,
	        navigation: true
	      }
	      return data
	    }
	  },
	  methods:{
		  tselect(msg){
			  this.selected = msg;
			  console.log(msg);
		  },
		  //md编辑保存
		  save(value, render) {
		       this.myhtml = render;
			   this.mymd = value;
		       console.log(value, render);
		 },
		 //替换转义字符
		 transformstr(str){
			str = str.replace(/'/g,'\\\'');
			str = str.replace(/"/g,'\\\"');
			return str;
		},
		 //博客保存
		 saveblog(){
			 let that = this;
			 let api='http://'+this.localhost+':'+this.port+'/saveblog';
			 let title = this.transformstr(this.title),
				 description = this.transformstr(this.description),
				 content = this.transformstr(this.mymd),
				 html_content = this.transformstr(this.myhtml),
				 token = this.$root.token;
				// console.log(title,content,token,description);
			 this.$http.get(api,{params: {title:title,content:content,html_content:html_content,description:description,token:token}}).then((response)=>{
				 if(response.body.result == false){
					 that.showmessage = "请重新登录";
					 that.showToast = true;
					 setTimeout(function(){
						 that.$router.push('/');
						 that.$router.go(0);
					 },that.delay);
				 }
			 	console.log(response);
			 },function(err){
			 	console.log(err);
			 })
			 this.showmessage = "已发布";
			 this.showToast = true;
			 this.$refs.toast.disappear();
			 setTimeout(function(){
				 that.$router.push('/');
				 that.$router.go(0);
			 },that.delay);
		 }
	  }
	}
</script>

<style>
	#ArticleWrite{
		height: 90vh;
		display: flex;
		flex-direction: column;
	}
	#ArticleWrite .title{
		width: 50%;
		margin: 0.3125rem auto;
		text-align: center;
		height: 2.5rem;
		border-radius: 0.5rem;
		margin-top: 4vh;
	}
	#ArticleWrite .description{
		width: 50%;
		margin: 0.3125rem auto;
		height: 10rem;
		border-radius: 0.5rem;
	}
	#ArticleWrite .saveblog{
		width: 6.25rem;
		height: 2.5rem;
	}
	.md{
		height: 80vh;
		width: 98%;
		margin: 0.3125rem auto;
		/* margin-top: 5vh; */
		z-index: 997 !important;
	}
</style>
